<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>人脸识别系统</title>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/layui/css/layui.css">
<link rel="stylesheet" href="../static/js/zfes/sweetalert.css">

<style type="text/css">
.div-form-elm{
color:#FFFFFF;height: 50px;margin-top:20px;margin-left:20px;margin-right:20px;background-color: #5A5B5B;border-radius:5px;
}
.label-form-elm{
margin-left: 20px;height: 50px;line-height:50px;font-size: 21px;text-align: right;float: left;
}
.input-form-elm{
width:180px;margin-left: auto;height: 50px;font-size: 21px;background-color: #5A5B5B;color:#FFFFFF;border: thin;
}
.btn-form-elm{
color:#FFFFFF;height: 43px;margin-top:3px;width:125px;background-color: #3F51B5;border-radius:5px;text-align: center;line-height: 30px;font-size: 25px
}
</style>

</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs7 layui-col-md-offset3">
        <div style="width: 1024px;height: 80px;background-color: #383939">
            <div style="margin-left: 100px;height: 80px;text-align:left;line-height:80px;font-size: 40px;color: #E51C23">
               人脸识别系统
            </div>
        </div>
        <div style="width: 1024px;height: 80px;background-color: #101010">
            <div style="display:inline;margin-left: 20px;height: 80px;text-align:left;line-height:80px;font-size: 25px;color:red">
              	提示信息： <span class="err" id="errorMessage" style="font-size: 20px;">系统资源加载中.....</span>
            </div>
        </div>

 <div class="layui-row"  style="background-color: #383939;width: 1024px;" >
 
    <div class="layui-col-xs8 layui-col-sm8 layui-col-md8" style="border-color: red">
   		 <video id="videoInput" width=600px height=600px; ></video><br/>
   		 <canvas id="canvasOutput" width=600px height=600px; style="display: none" ></canvas>
       </div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
 			 <div style="color: #FFFFFF;font-size: 30px;margin-left: 50px;margin-top: 29px;text-align: left">
                  		  身份信息
                </div>
                <form class="form-horizontal form" role="from" id="acq_form"  enctype="multipart/form-data">

                    <div class="div-form-elm" >
                        <label class="label-form-elm">姓名：</label>
                        <input class="input-form-elm"  type="text" id="name" name="name" autocomplete="off">
                    </div>
                    
                      <div  class="div-form-elm">
                        <label class="label-form-elm">电话：</label>
                        <input class="input-form-elm"  type="text" id="phone"  name="phone" autocomplete="off">
                    </div>
                      <div  class="div-form-elm">
                        <label class="label-form-elm">邮箱：</label>
                        <input class="input-form-elm"    type="text"  id="email" name="email"  autocomplete="off">
                    </div>

					<div  class="div-form-elm">
                        <label  class="label-form-elm">性别：</label>
                        <select name="gender"   id="gender"  class="input-form-elm" >
                        <option value="1" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;男&nbsp; &nbsp;</option>
                        <option  value="2" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;女&nbsp; &nbsp;</option>
                        <option  value="0" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;未知&nbsp; &nbsp;</option>
                        </select>
                    </div>

  					<div  class="div-form-elm">
                        <label class="label-form-elm">年龄：</label>
                        <input class="input-form-elm"  id="age" type="number" name="age">
                    </div>
                    
                    <div  class="div-form-elm">
                        <label  class="label-form-elm">相似度：</label>
                        <input  class="input-form-elm"   id="similarScore" type="text" name="similarScore">
                    </div>
                    
                    <div class="div-form-elm">
                        <button type="button"  id="startAndStop" disabled="disabled" style="background-color: #B0B0B0l;display: none;" class="btn-form-elm">开始</button>
                   	    <button type="button" class="btn-form-elm" onclick="resumeDetectFace();">恢复检测 </button>
                   	    <button type="button" class="btn-form-elm"  onclick="window.location.reload();">刷新 </button>
                    </div>
                    
                </form>
    </div>
    
  </div>

</div>

</div>
    <script src="../static/jquery/jquery.2.2.4.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/vue.min.js"></script>
    
   <script src="../static/opencv/utils.js"></script>
     <script src="../static/opencv/biz.js"></script>
   
       <script src="../static/js/zfes/zfes.util.js"></script>
    <script src="../static/js/zfes/sweetalert.min.js"></script>
    <script src="../static/js/zfes/zfes.core.js"></script>
    <script src="../static/js/zfes/zfes.alert.swal.js"></script>
    <script src="../static/js/zfes/zfes.ajax.js"></script>
    
<script>


opencvBiz

const FPS = 30;
var streaming = false;

var utils = new Utils('errorMessage');
var video = document.getElementById('videoInput');
var startAndStop = document.getElementById('startAndStop');
var canvasOutput = document.getElementById('canvasOutput');
var canvasContext = canvasOutput.getContext('2d');
var src,dst,gray; 
var cap;

var facesRectVector;
var eyesRectVector; 
var faceCascadeClassifier; 
var eyeCascadeClassifier; 

var detectedFaceAndPause=false;


function processVideo(callbackz) { 

	try { 
		if (!streaming) { 
			src.delete();
            dst.delete();
            gray.delete();
            facesRectVector.delete();
            eyesRectVector.delete();
            faceCascadeClassifier.delete();
            eyeCascadeClassifier.delete();
			return; 
		} 
		var begin = Date.now(); 
		cap.read(src); 
		src.copyTo(dst);
		cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
		//let msize = new cv.Size(1, 1);
		//faceCascadeClassifier.detectMultiScale(gray, facesRectVector, 1.5, 3, 0, msize, msize);
		// faceCascadeClassifier.detectMultiScale(gray, facesRectVector, 1.6, 3, 3);
		if(detectedFaceAndPause){
			return;
		}
		// let msize = new cv.Size(0.5, 0.5);
		 let msize = new cv.Size(0.2, 0.2);
		 faceCascadeClassifier.detectMultiScale(gray, facesRectVector, 1.3, 3, 0, msize, msize);
			
		for (let i = 0; i < facesRectVector.size(); ++i) {
            let face = facesRectVector.get(i);
            let point1 = new cv.Point(face.x, face.y);
            let point2 = new cv.Point(face.x + face.width, face.y + face.height);
            cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
            cv.imshow('canvasOutput', dst); 
            var image = new Image();
			image.src = canvasOutput.toDataURL("image/png");
			var imgdata=image.src ;
			//console.log("imgdata",imgdata);
			if(imgdata){
				video.style.display="none";
				canvasOutput.style.display="";
				detectedFaceAndPause=true;
				utils.printError('检测到人脸，后台比对中....');
				 $.ajax({
					url:"/reco/face/base64Img",
					data: {'faceimg': imgdata},
					dataType: 'json',
					type: 'post',
					success: function(res) {
						console.log(res);
						if(callbackz){
							callbackz(res);
						}
				    
					},
					error: function(xhr, type, errorThrown) {
						mui.toast('网络异常，请稍后再试！');
						detectedFaceAndPause=false;
					}
				}); 
			}
		
			//C:\Users\root\Documents\Apowersoft\Apowersoft Online Screen Recorder
			 
            /*  let roiGray = gray.roi(face);
	            let roiSrc = src.roi(face);
	            eyeCascadeClassifier.detectMultiScale(roiGray, eyesRectVector);
	            for (let j = 0; j < eyesRectVector.size(); ++j) {
	            	 let eyez = eyesRectVector.get(j);
	            	 
	            	   let pointE1 = new cv.Point(eyez.x, eyez.y);
					   let pointE2 = new cv.Point(eyez.x +eyez.width,eyez.y + eyez.height);
					   
					   cv.rectangle(dst, pointE1, pointE2, [0, 0, 255, 255]);
	            } */
	            
	            
		}
		
		cv.imshow('canvasOutput', dst); 
		// schedule the next one. 
		let delay = 1000/FPS - (Date.now() - begin); 
		setTimeout('processVideo(callbackz)', delay); 
	} catch (err) { utils.printError(err); } 
}
function callbackz(res){
	if(res.statusCode!=200){
		alertSwal.warningText("对比完成，人脸检测失败，原因："+res.message);
		return ;
	}
	if(res.data.resList.length==0){
		alertSwal.warningText("对比完成，未查询到数据");
		return ;
	}
	var userFaceInfo=res.data.resList[0].userFaceInfo;
	var similarScore=res.data.resList[0].similarScore;
	$("#name").val(userFaceInfo.name);
	$("#phone").val(userFaceInfo.phone);
	$("#email").val(userFaceInfo.email);
	$("#age").val(userFaceInfo.age);
	$("#similarScore").val(similarScore);
	alertSwal.successText("图像匹配成功");
	
}	
	
function onDetectedFace(imgdata){
	video.style.display="none";
	canvasOutput.style.display="";
	detectedFaceAndPause=true;
	utils.printError('检测到人脸，后台比对中....');
}
function resumeDetectFace(){
	if(detectedFaceAndPause==false){
		return;
	}
	document.getElementById("acq_form").reset();
	utils.printError('人脸检测中.....');
	video.style.display="";
	canvasOutput.style.display="none";
	detectedFaceAndPause=false;
	setTimeout('processVideo(callbackz)', 1000);
}
	
	
function initMat(){
	 src = new cv.Mat(video.height, video.width, cv.CV_8UC4); 
	 dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
	 gray = new cv.Mat();
	 cap = new cv.VideoCapture(video);  
	 
	 facesRectVector = new cv.RectVector();

	 eyesRectVector = new cv.RectVector();

	 faceCascadeClassifier = new cv.CascadeClassifier();

	 eyeCascadeClassifier = new cv.CascadeClassifier();
	 
	 faceCascadeClassifier.load('haarcascade_frontalface_default.xml');
	 eyeCascadeClassifier.load('haarcascade_eye.xml');
}


utils.loadOpenCv(() => {
    let eyeCascadeFile = 'haarcascade_eye.xml';
    utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {
        let faceCascadeFile = 'haarcascade_frontalface_default.xml';
        utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
        //	setButnEnable();
        	utils.clearError();
    		utils.startCamera('vga', onVideoStarted, 'videoInput');
    		utils.printError('系统资源加载完成，人脸检测中');
        	//setTimeout(processVideo, 0);
        });
    });
});
startAndStop.addEventListener('click', () => {
	if(!streaming) {
		setButnEnable();
		utils.clearError();
		utils.startCamera('vga', onVideoStarted, 'videoInput');
	} else {
		setButnDiable();
		utils.stopCamera();
		onVideoStopped();
	}
});

function onVideoStarted() {
	streaming = true;
	videoInput.width = videoInput.videoWidth;
	videoInput.height = videoInput.videoHeight;
	initMat();
	setTimeout('processVideo(callbackz)', 1000);
	//utils.executeCode('codeEditor');
}

function onVideoStopped() {
	streaming = false;
	canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
}

function setButnEnable() {
	startAndStop.value='停止';
	startAndStop.removeAttribute('disabled','');
	startAndStop.style.backgroundColor="#3F51B5";
}
function setButnDiable(){
	startAndStop.setAttribute('disabled','disabled');
	startAndStop.value='开始';
	startAndStop.style.backgroundColor="#B0B0B0";
}

</script>
</body>
</html>